<template>
    <div>
        <div class="search">
            <input type="text"  v-model="keyWord" placeholder="请输入城市或拼音" class="search-input">
        </div>
        <div class="search-content" v-show="keyWord" ref="searchwraper">
            <div>
                <div v-for="item of searchList" 
                    :key="item.id" 
                    class='cities-name border-bottom'
                    @click='handleClick(item.name)'
                >
                {{item.name}}</div>
                <div class='cities-name border-bottom' v-show="isData">对不起，没有找到相关匹配项</div>
            </div>
        </div>
    </div>
</template>
<script>
import Bscroll from 'better-scroll'
export default {
    name:'citySearch',
    methods: {
        handleClick(city){
            this.$store.commit('changeCity',city)
            this.$router.push('./')
        }
    },
    mounted() {
        this.scroll = new Bscroll(this.$refs.searchwraper)
    },
    data() {
        return {
            keyWord:'',
            searchList:[],
            timer:null
        }
    },
    props:{
        cities:Object
    },
    watch: {
        keyWord(){
            if(this.timer){
                clearTimeout(this.timer)
            }
            if(!this.keyWord){
                this.searchList=[]
                return
            }
            setTimeout(() => {
                const result=[]
                for( let i in this.cities){
                    this.cities[i].forEach(e => {
                        if(e.spell.indexOf(this.keyWord) >-1 ||
                            e.name.indexOf(this.keyWord) >-1
                        ){
                            result.push(e)
                        }
                    });
                }
                this.searchList=result
            }, 100);
        }
    },
    computed: {
        isData(){
            return !this.searchList.length
        }
    }
}
</script>
<style lang="stylus" scoped>
    @import '~styles/varibles.styl';
    .search
        height :0.72rem
        background :$bgColor
        padding : 0 .1rem      
        text-align :center
        .search-input
            height :.64rem
            line-height :.64rem
            box-sizing: border-box
            border-radius :.09rem
            width :100%
            padding : 0 .1rem
            text-align :center     
            color:#666  
    .search-content 
        z-index :1
        position:absolute
        top:1.58rem    
        background :#eee
        left:0
        right:0
        bottom:0
        overflow: hidden
        .cities-name
            line-height :.62rem
            padding-left :.2rem
            color:#666
            background :#fff

</style>